feat(chart): enhance margin calculations for axes in line/bar chart c… by rmojica-godaddy · Pull Request #161 · godaddy/antares

rmojica-godaddy · 2026-04-22T21:17:11Z

Summary

Replaces the per-component margin/sizing logic in LineChart and BarChart
with a single shared useScrollableXYChart hook that measures the rendered
axes and returns the margins, content-sized width/height, scroll offsets, and
label orientation the chart should use. Fixes clipped outer tick labels,
mis-sized scroll regions when X-labels rotate, and broken layouts in RTL.

Changes Made

Added useScrollableXYChart hook (with README, story, example, and tests)
and adopted it in both LineChart and BarChart.
Margins are now derived from real axis measurements, RTL-aware, and applied
with hysteresis so the layout doesn't oscillate.
Chart width/height grow to fit the rendered labels; the parent scrolls when
labels need more room than the viewport.
xLabelsOrientation: 'auto' rotates X labels vertical when they wouldn't
fit, with a shared helper that mirrors the rotation in RTL.
Axis measurements are batched in one requestAnimationFrame and skip
no-op updates.
Tooltips and crosshairs now follow the cursor while the chart scrolls.
Removed the old line-chart/use-chart-container.ts and BarChart's
getEffectiveMargin swap.
Updated visual regression snapshots to match the new measured margins.

Test Plan

New tests for chart-container-margins and useScrollableXYChart (LTR + RTL,
hysteresis, scroll behavior).
Updated LineChart and BarChart browser tests for the new margin behavior.
Regenerated VR snapshots for all affected stories.
Manually verified resize, RTL, label rotation, and scrolling tooltips in
Storybook.

Checklist

My code follows the project's code style (biome)
I have added/updated tests that prove my fix is effective or that my feature works
I have added/updated documentation (README, Storybook stories, etc.)
All new and existing tests pass locally
I have added a changeset (run npm run changeset if this affects packages)
I have reviewed my own code and commented any complex areas

…omponent

changeset-bot · 2026-04-22T21:17:19Z

⚠️ No Changeset found

Latest commit: 198f3ab

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

rmojica-godaddy · 2026-04-22T21:18:24Z

/approve-screenshots

github-actions · 2026-04-22T21:18:37Z

📸 Updating screenshots... View workflow run

github-actions · 2026-04-22T21:20:14Z

📚 Storybook Preview

Preview URL: https://godaddy.github.io/antares/pr-161/

Preview will be automatically deleted when this PR is closed.

github-actions · 2026-04-22T21:22:06Z

Docs Site Preview

Preview URL: https://godaddy.github.io/antares/pr-161-site/

Preview will be automatically deleted when this PR is closed.

github-actions · 2026-04-22T21:22:16Z

🎉 Successfully updated and committed screenshots!

…arChart and LineChart

…for clarity

…lity

…lculations

…verflow detection

github-actions · 2026-04-27T15:01:11Z

📸 Updating screenshots... View workflow run

github-actions · 2026-04-27T15:05:00Z

🎉 Successfully updated and committed screenshots!

…n calculations for RTL support

github-actions · 2026-04-27T23:19:44Z

📸 Updating screenshots... View workflow run

github-actions · 2026-04-27T23:23:31Z

🎉 Successfully updated and committed screenshots!

Copilot

Pull request overview

Adds a new useScrollableXYChart hook to centralize axis-driven margin/size calculations for scrollable visx XY charts, and updates Line/Bar charts to use it (including improved RTL + vertical-label behavior).

Changes:

Introduces useScrollableXYChart (with DOM measurement helpers, Storybook doc, and browser tests).
Replaces LineChart’s old container/margin hook with useScrollableXYChart and adds a shared getXLabelVerticalProps helper.
Updates BarChart to use the new hook, simplifies margin handling (removes getEffectiveMargin), and adds RTL controls to the playground/story.

Reviewed changes

Copilot reviewed 16 out of 48 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/@godaddy/antares/components/chart/utils.ts	Adds shared `getXLabelVerticalProps` helper for vertical X tick labels (LTR/RTL).
packages/@godaddy/antares/components/chart/use-scrollable-xy-chart/use-scrollable-xy-chart.stories.tsx	Adds Storybook story entry for the new hook.
packages/@godaddy/antares/components/chart/use-scrollable-xy-chart/test/use-scrollable-xy-chart.browser.test.tsx	Adds browser tests for sizing, scrolling, and pointermove re-dispatch behavior.
packages/@godaddy/antares/components/chart/use-scrollable-xy-chart/test/chart-container-margins.browser.test.tsx	Adds unit-style browser tests for margin measurement helpers.
packages/@godaddy/antares/components/chart/use-scrollable-xy-chart/src/index.tsx	Implements the new hook (axis observers + rAF batching + logical→physical margin mapping).
packages/@godaddy/antares/components/chart/use-scrollable-xy-chart/src/chart-container-margins.ts	Adds DOM traversal/measurement helpers for axis-derived margins.
packages/@godaddy/antares/components/chart/use-scrollable-xy-chart/examples/auto-layout.tsx	Adds an example used by Storybook/tests to validate hook outputs.
packages/@godaddy/antares/components/chart/use-scrollable-xy-chart/README.mdx	Documents the hook’s inputs/outputs and behavior.
packages/@godaddy/antares/components/chart/line-chart/src/use-chart-container.ts	Removes the old per-chart container/margin hook.
packages/@godaddy/antares/components/chart/line-chart/src/index.tsx	Migrates LineChart to `useScrollableXYChart` and uses the new vertical-label helper.
packages/@godaddy/antares/components/chart/bar-chart/src/utils.ts	Removes RTL margin swapping helper; assumes margins are already physically mapped.
packages/@godaddy/antares/components/chart/bar-chart/src/use-bar-chart.ts	Stops computing `effectiveMargin`; uses `margin` directly.
packages/@godaddy/antares/components/chart/bar-chart/src/index.tsx	Migrates BarChart to `useScrollableXYChart`, updates vertical label props and margin usage.
packages/@godaddy/antares/components/chart/bar-chart/src/index.module.css	Removes CSS-based vertical label rotation rules (now handled via tickLabelProps).
packages/@godaddy/antares/components/chart/bar-chart/examples/bar-chart-playground.tsx	Adds RTL toggle via `RTLProvider`.
packages/@godaddy/antares/components/chart/bar-chart/bar-chart.stories.tsx	Adds Storybook control/default for the new RTL playground toggle.
packages/@godaddy/antares/components/chart/line-chart/test/screenshots/*	Updates visual test screenshots to reflect the new layout behavior.
packages/@godaddy/antares/components/chart/bar-chart/test/screenshots/*	Updates visual test screenshots to reflect the new layout behavior.

….tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

github-actions · 2026-04-28T16:08:25Z

📸 Updating screenshots... View workflow run

github-actions · 2026-04-28T16:12:04Z

✅ No screenshot changes detected. Screenshots are already up to date.

…arks

github-actions · 2026-04-28T19:17:11Z

📸 Updating screenshots... View workflow run

github-actions · 2026-04-28T19:20:36Z

🎉 Successfully updated and committed screenshots!

feat(chart): enhance margin calculations for axes in line/bar chart c…

6228e29

…omponent

test: update visual regression screenshots

83e90aa

rmojica-godaddy added 8 commits April 23, 2026 10:47

feat(chart): replace useChartContainer with useScrollableXYChart in B…

f012658

…arChart and LineChart

refactor(chart): update useScrollableXYChart props and documentation …

c17c7d7

…for clarity

test(chart): enhance tests for margin calculations and element visibi…

644d686

…lity

fix(chart): improve minimum width calculations for X-axis labels

eaacf58

Merge remote-tracking branch 'origin/main' into rmb/enhance-margin-ca…

a7a0e63

…lculations

chore: update snapshots after merge main

9d317d6

fix(chart): improve margin calculations by measuring text rects for o…

d8c46d1

…verflow detection

chore: update snapshots

736343d

rmojica-godaddy added 2 commits April 27, 2026 17:39

refactor(chart): add request animation frame for xy charts

3e7d630

refactor(chart): replace effectiveMargin with margin and update margi…

4efaa00

…n calculations for RTL support

rmojica-godaddy force-pushed the rmb/enhance-margin-calculations branch from 0909960 to 4efaa00 Compare April 27, 2026 23:19

test: update visual regression screenshots

4dd8326

Merge branch 'main' into rmb/enhance-margin-calculations

812d63b

rmojica-godaddy marked this pull request as ready for review April 28, 2026 14:23

rmojica-godaddy requested a review from a team as a code owner April 28, 2026 14:23

Copilot AI review requested due to automatic review settings April 28, 2026 14:23

Copilot started reviewing on behalf of rmojica-godaddy April 28, 2026 14:23 View session

Copilot AI reviewed Apr 28, 2026

View reviewed changes

Comment thread packages/@godaddy/antares/components/chart/line-chart/src/index.tsx

Comment thread packages/@godaddy/antares/components/chart/bar-chart/src/index.tsx Outdated

Comment thread packages/@godaddy/antares/components/chart/use-scrollable-xy-chart/src/index.tsx

Update packages/@godaddy/antares/components/chart/bar-chart/src/index…

da7c282

….tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

egaitan-godaddy reviewed Apr 28, 2026

View reviewed changes

Comment thread ...chart/test/__screenshots__/bar-chart.visual.test.tsx/formatted-tick-marks-chromium-linux.png

fix(chart): increase bar chart height to improve visibility of tick m…

7eea636

…arks

test: update visual regression screenshots

198f3ab

Conversation

rmojica-godaddy commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes Made

Test Plan

Checklist

Uh oh!

changeset-bot Bot commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

rmojica-godaddy commented Apr 22, 2026

Uh oh!

github-actions Bot commented Apr 22, 2026

📸 Updating screenshots... View workflow run

Uh oh!

github-actions Bot commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Storybook Preview

Uh oh!

github-actions Bot commented Apr 22, 2026

Docs Site Preview

Uh oh!

github-actions Bot commented Apr 22, 2026

🎉 Successfully updated and committed screenshots!

Uh oh!

github-actions Bot commented Apr 27, 2026

📸 Updating screenshots... View workflow run

Uh oh!

github-actions Bot commented Apr 27, 2026

🎉 Successfully updated and committed screenshots!

Uh oh!

github-actions Bot commented Apr 27, 2026

📸 Updating screenshots... View workflow run

Uh oh!

github-actions Bot commented Apr 27, 2026

🎉 Successfully updated and committed screenshots!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Apr 28, 2026

📸 Updating screenshots... View workflow run

Uh oh!

github-actions Bot commented Apr 28, 2026

✅ No screenshot changes detected. Screenshots are already up to date.

Uh oh!

Uh oh!

github-actions Bot commented Apr 28, 2026

📸 Updating screenshots... View workflow run

Uh oh!

github-actions Bot commented Apr 28, 2026

🎉 Successfully updated and committed screenshots!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rmojica-godaddy commented Apr 22, 2026 •

edited

Loading

changeset-bot Bot commented Apr 22, 2026 •

edited

Loading

github-actions Bot commented Apr 22, 2026 •

edited

Loading